<template>
	<view class="comment">
		<view class="comment_userComment" v-for="item in userCommentToShopDetails" :key="item.id">
			<!-- 用户信息 -->
			<view class="comment_userComment_head">
				<image :src='`http://localhost:15000/eat-service/fileManager/getImageById?id=` + item.userProtalAvatarId' class="img_userAvatar"></image>
				<p style="font-weight: bold;font-size: 14px;margin-left: 6px;width: 300px;float: left;">{{item.userProtalNickName}}</p>
				<p style="font-size: 13px;font-weight: bold;color:#C4C2C3;float: left;margin-top: 6px;margin-left: 6px;">{{item.createTime}}</p>
			</view>
			<!-- 用户购买的商品详情 -->
			<view class="comment_userComment_commodity" >
				<p style="font-weight: bold;font-size: 14px;width: 130px;float: left;color: #C4C2C3;" v-for="it in item.commodityName" :key="it.commodityName">{{it.commodityName}}*{{it.sum}}</p>
			</view>
			<!-- 评分 -->
			<view class="comment_userComment_score">
				<p style="font-weight: bold;font-size: 14px;color: #C4C2C3;width:50px;float:left;">满意度</p>
				<u-rate v-model="item.satisfactionScore" active-color="#FA3534" inactive-color="#b2b2b2" :disabled="true" style="margin-left: 4px;float: left;"></u-rate>
				<p style="font-weight: bold;font-size: 14px;color: #C4C2C3;width:60px;float:left;margin-left:10px ;">味道{{item.tasteScore}}星</p>
				<p style="font-weight: bold;font-size: 14px;color: #C4C2C3;width:60px;float:left;margin-left:10px ;">包装{{item.packingScore}}星</p>
			</view>
			<!-- 评论区域 -->
			<view class="comment_userComment_commentArea">
				<p style="font-weight: bold;font-size: 14px;">{{item.shopEvaluateContent}}</p>
			</view>
			<!-- 评论图片展示 -->
			<view class="comment_userComment_imgDiv">
				<image class="comment_userComment_img" src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
				<image class="comment_userComment_img" src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
				<image class="comment_userComment_img" src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
			</view>
			<!-- 回复按钮 -->
			<view class="comment_userComment_bottom" v-show="item.childs.length == 0">
				<p  @click="openReplyPopup(item.id)" style="font-weight: bold;font-size: 16px;float:right;margin-right: 20px;">回复</p>
			</view>
			<!-- 回复内容 -->
			<view class="comment_userComment_shopComment" v-show="item.childs.length != 0"  v-for="replyContent in item.childs" :key="item.id">
				<p style="margin-top: 12px;margin-left: 8px;font-weight: bold;color: #89898B;font-size: 14px;">商家回复</p>
				<p style="margin-top: 16px;color: #BDBDBD;font-size:14px;margin-left: 8px;">{{replyContent.replyContent}}</p>
				<!-- <p style="margin-top: 16px;color: #BDBDBD;font-size:14px;margin-left: 8px;"></p> -->
			</view>
		</view>
		<!-- 回复弹窗 -->
		<u-popup :show="commentShow" mode="bottom" @close="closeCommentShow" border-radius="60" >
			<view style="width: 300px;height: 300px;">
				<p style="font-weight: bold;font-size: 18px;margin-left: 160px;margin-top:30px">回复评论</p>
				<!-- <u-field v-model="shopComment"></u-field> -->
				<u-input
					v-model="shopComment" 
					placeholder="请输入评论内容"
					border="none"
					style="margin-top:30px;margin-left:50px;"
				/>
				<u-button type="primary" style="width: 90px;margin-top: 60px;margin-left: 150px;" text="发表" @click="publishComment"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				value: 2,
				// 从头部获取商家的id
				shopId:'',
				// 用户评价商家的集合
				userCommentToShopList:[],
				// 最终的用户评价商家的详细集合
				userCommentToShopDetails:[],
				// 回复按钮默认false
				commentShow:false,
				// 商家评论
				shopComment:'',
				// 父评论id
				parentEvaluateId:'',
			}
		},
		methods:{
			// 商家回复用户评论
			publishComment(){
				this.$myRequest({
					url: '/eat-service/evaluate/submitReply',
					method:'POST',
					data:{
						parentEvaluateId: this.parentEvaluateId,
						replyContent : this.shopComment,
						shopId : this.shopId
					},
					dataType:'json',
				}).then(res=>{
					if(res.data.flag){
						uni.showToast({
							title: '回复成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						this.commentShow = false
						// 成功跳转
						// uni.switchTab({
						// 	url:'/pages/comment/comment'
						// })
					}else{
						uni.showToast({
							title: '回复失败',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			// 打开回复弹窗
			openReplyPopup(item){
				this.commentShow = true
				this.parentEvaluateId = item
			},
			// 关闭回复按钮弹窗
			closeCommentShow(){
				this.commentShow = false
			},
			// 初始化查询用户对商家的评论
			getUserCommentToShop(){
				this.$myRequest({
					url:'/eat-service/evaluate/getUserCommentToShop',
					data:{
						shopId:this.shopId
					}
				}).then(res=>{
					this.userCommentToShopList = res.data.obj
					if(this.userCommentToShopList!=null)
						//查询用户购买的商品名称
						this.getUserBuyCommodityName()
				})
			},
			getUserBuyCommodityName(){
				this.userCommentToShopList.forEach((item)=>{
					this.$myRequest({
						url:'/eat-service/commoditySoldNote/getUserBuyCommodityName',
						data:{
							orderId: item.commodityOrderId
						}
					}).then(res=>{
						// this.commodityNameList = res.data.obj.commodityEntities
						// this.commodityNameList.forEach((item)=>{
							
						// })
						this.$set(item,"commodityName",res.data.obj.commodityEntities)
						this.userCommentToShopDetails.push(item)
					})
				})
			},
		},
		mounted() {
			// 从头部获取商家的id
			this.shopId = uni.getStorageSync('shopId')
			console.log(this.shopId)
			// 初始化查询用户对商家的评论
			this.getUserCommentToShop()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx;
		text-align: center;
	}
	.comment{
		width: 100%;
		overflow: hidden;
		background-color: #F6F6F6;
	}
	.comment_userComment{
		width: 380px;
		background-color: white;
		border-radius: 8px;
		margin-left: 20px;
		margin-top: 10px;
		overflow: hidden;
	}
	.comment_userComment_head{
		width: 350px;
		height: 40px;
		margin-top: 20px;
		margin-left: 10px;
	}
	.img_userAvatar{
		width: 40px;
		height: 40px;
		border-radius: 100%;
		float:left;
	}
	.comment_userComment_commodity{
		width: 370px;
		height: 20px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.comment_userComment_score{
		width: 414px;
		height: 20px;
		margin-top: 16px;
		margin-left: 10px;
	}
	.comment_userComment_commentArea{
		margin-left: 10px;
		margin-top: 8px;
		width: 350px;
		height: 70px;
	}
	.comment_userComment_imgDiv{
		margin-left: 10px;
		width: 360px;
		height: 100px;
		margin-top: 8px;
	}
	.comment_userComment_img{
		width: 100px;
		height: 100px;
		border-radius: 8px;
		margin-right: 10px;
	}
	.comment_userComment_bottom{
		width: 380px;
		height: 20px;
		margin-top:10px;
		padding-bottom: 16px;
	}
	.comment_userComment_shopComment{
		width: 360px;
		height: 100px;
		margin-top: 10px;
		background-color: #F5F5F5;
		margin-left: 10px;
		border-radius: 16px;
		overflow: hidden;
		margin-bottom: 24px;
	}
</style>